<template>
  <view class="uploadPhoto allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack :title="options.is_flag != 1 ?'家庭相册':'个人相册'" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight" z-index="10">
      <template>
        <view class="uploadPhoto_headerTitle">
          <text class="uploadPhoto_headerTitle_text">{{ selectedFamilyDetail.familyName || '暂无家庭名称'}}</text>
        </view>
      </template>
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <scroll-view :scroll-y="true" class="uploadPhoto_waterfall allColumnCenter"
                 :style="{height:`calc(100vh - ${headerHeight}px)`}" @scrolltolower="waterfallScrolltolower">
      <u-waterfall v-model="pictureList" ref="uWaterfall" :add-time="20">
        <template v-slot:left="{leftList}">
          <view class="uploadPhoto_waterfall_list mt-19" v-for="(item, index) in leftList" :key="index"
                @click.stop="findOutMore(item)">
            <image :src="item.url" class="uploadPhoto_waterfall_list_image" mode="widthFix"></image>
            <view class="uploadPhoto_waterfall_list_bottom row items-center justify-around">
              <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       src="/static/shiqin-images/thumbsUp.png"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">点赞 {{ item.click_num }}</text>
              </view>
              <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       src="/static/shiqin-images/comments.png"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">评论 {{ item.comment }}</text>
              </view>
              <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       src="/static/shiqin-images/share.png"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">分享</text>
              </view>
            </view>
          </view>
        </template>
        <template v-slot:right="{rightList}">
          <view class="uploadPhoto_waterfall_list mt-19" v-for="(item, index) in rightList" :key="index"
                @click.stop="findOutMore(item)">
            <image :src="item.url" class="uploadPhoto_waterfall_list_image" mode="widthFix"></image>
            <view class="uploadPhoto_waterfall_list_bottom row items-center justify-around">
              <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       src="/static/shiqin-images/thumbsUp.png"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">点赞 {{ item.click_num }}</text>
              </view>
              <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       src="/static/shiqin-images/comments.png"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">评论 {{ item.comment }}</text>
              </view>
              <view class="uploadPhoto_waterfall_list_bottom_icon allColumnCenter">
                <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                       src="/static/shiqin-images/share.png"></image>
                <text class="uploadPhoto_waterfall_list_bottom_icon_text mt-6">分享</text>
              </view>
            </view>
          </view>
        </template>
      </u-waterfall>
      <view style="height: 250rpx;"></view>
    </scroll-view>
    <view class="anniversaryContent_bottomButton allRowCenter mt-50" @click.stop="uploadPhoto">
      <text class="anniversaryContent_bottomButton_text">上传</text>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import {getGroupPhotoAlbum, uploadGroupImage} from "../../api/shiqinAPI";

export default {
  components: {HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      // 图片列表
      pictureList: [],
      // 获取家庭相册的参数
      familyAlbumParams: {
        family_id: '',
        page: 1,
        pagesize: 10,
        page_total: 0,
        type:2,
        member_id:''
      },
      options: {
        is_flag: 2
      }
    };
  },
  computed: {
    familyId() {
      return this.$store.state.shiqinStore.selectedId
    },
    selectedFamilyDetail(){
      return this.$store.state.shiqinStore.selectedFamilyDetail
    }
  },
  onLoad(options) {
    this.options = options
    this.familyAlbumParams.family_id = this.familyId
    this.getFamilyAlbum()
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    findOutMore(info) {
      this.$nav.navigateTo('/pages/photo/photoDetails', {id: info.id,is_flag: this.options.is_flag})
    },
    // 获取家庭相册
    async getFamilyAlbum() {
      this.familyAlbumParams.type = this.options.is_flag != 1 ? 2 : 1
      this.familyAlbumParams.member_id = this.options.member_id || ''
      let {data} = await getGroupPhotoAlbum(this.familyAlbumParams)
      data.list.data.forEach((item, index) => {
        this.pictureList.push(item)
      })
      this.familyAlbumParams.page_total = data.list.total
    },
    // 上传图片
    uploadPhoto() {
      this.$util.uploadImageChange({count: 9, url: 'upload/image'}, (res => {
        uploadGroupImage({
          type: this.options.is_flag != 1 ? 2 : 1,
          family_id: this.familyId,
          url: res.data.url,
          member_id: this.options.member_id || ''
        }).then(res => {
          if (res.status == 200) {
            uni.showToast({
              title: '上传成功', icon: 'none'
            })
            this.pictureList = []
            this.$refs.uWaterfall.clear();
            this.familyAlbumParams.page = 1
            this.getFamilyAlbum()
          } else {
            uni.showToast({
              title: '上传失败', icon: 'none'
            })
          }
        })
      }))
    },
    waterfallScrolltolower() {
      if (this.familyAlbumParams.page * this.familyAlbumParams.page_size < this.familyAlbumParams.page_total) {
        this.familyAlbumParams.page += 1
        this.getFamilyAlbum()
      }
    }
  },
}
</script>

<style lang="scss">
.uploadPhoto {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .uploadPhoto_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .uploadPhoto_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .uploadPhoto_waterfall {
    width: 702rpx;

    .uploadPhoto_waterfall_list {
      width: 340rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      position: relative;

      .uploadPhoto_waterfall_list_image {
        width: 340rpx;
      }

      .uploadPhoto_waterfall_list_bottom {
        //position: absolute;
        //bottom: 0;
        width: 340rpx;
        height: 110rpx;
        background: #FFFFFF;
        //border-radius: 0rpx 0rpx 20rpx 20rpx;
        //z-index: 1;

        .uploadPhoto_waterfall_list_bottom_icon {
          .uploadPhoto_waterfall_list_bottom_icon_image {
            width: 35rpx;
            height: 35rpx;
          }

          .uploadPhoto_waterfall_list_bottom_icon_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }
      }
    }
  }

  .uploadPhoto_fixBottom {
    width: 750rpx;
    height: 150rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #F5F5F5;
    opacity: 0.9;
    overflow: hidden;
    z-index: 10;

    .uploadPhoto_fixBottom_topText {
      .uploadPhoto_fixBottom_topText_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #A0A0A0;
      }
    }

    .uploadPhoto_fixBottom_button {
      width: 574rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .uploadPhoto_fixBottom_button_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .anniversaryContent_bottomButton {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    .anniversaryContent_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>
